<template>
  <!-- tabs -->
  <div
    v-if="tabList.length"
    ref="height"
    :class="{ sticky: props.sticky, 'tag-list': props.type === 'card', tab: props.type !== 'card' }">
    <van-tabs
      ref="tabsRef"
      v-model:active="active"
      :color="props.color"
      shrink
      :type="props.type"
      :before-change="change">
      <van-tab
        v-for="item in tabList"
        :key="item[props.value]"
        :name="item[props.value]"
        :title="item[props.propo]">
        <!-- <slot></slot> -->
      </van-tab>
    </van-tabs>
    <!--展示右侧信息 -->
    <slot name="rigthinfo"></slot>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, ref } from 'vue';
import type { TabsInstance } from 'vant';
interface Props {
  active?: string | number;
  tabList?: any;
  sticky?: boolean;
  top?: string;
  marginLeft?: string;
  isLine?: string;
  type?: any;
  layout?: string;
  value?: string;
  propo?: string;
  color?: string;
}
const props = withDefaults(defineProps<Props>(), {
  tabList: [],
  active: 1,
  // 是否吸顶
  sticky: false,
  // 距离顶部距离
  top: '0',
  // 间隔距离
  marginLeft: '8vw',
  // 是否显示线条
  isLine: 'block',
  type: 'line',
  layout: 'normal',
  propo: 'name',
  value: 'id',
  color: '#ee3923'
});
const tabsRef = ref<TabsInstance>();
const active = ref(props.active);
const height = ref();
const { tabList } = toRefs(props);

interface EmitType {
  (e: 'change', val: any);
}
const emit = defineEmits<EmitType>();
const change = (val: any): boolean => {
  emit('change', val);
  return true;
};

// 跳转到指定tab
const jumpTab = (activeIndex: number = 0) => {
  tabsRef.value?.scrollTo(activeIndex);
};

defineExpose({
  jumpTab,
  height
});
</script>

<style lang="scss" scoped>
.tab {
  padding-top: 16px;
  background: #fff;
  :deep(.van-tabs) {
    .van-tabs__line {
      width: 32px;
      height: 6px;
      display: v-bind('props.isLine');
    }
    .van-tabs__nav {
      padding: 0 40px;
      display: flex;
      justify-content: v-bind('props.layout');
    }
    .van-tab {
      padding: 0;
      margin-left: v-bind('props.marginLeft');
      // margin-left: 68px;
      &:first-child {
        margin: 0;
      }
    }
    .van-tabs__line {
      bottom: 8px;
    }
    .van-tab__text {
      font-size: 28px;
      color: #666;
    }
    .van-tab--active {
      .van-tab__text {
        font-size: 32px !important;
        color: #333;
      }
    }
  }
}
.tag-list {
  padding: 40px 0 20px;
  background: #fff;
  padding-right: 40px;
  :deep(.van-tabs__nav--card) {
    border: none;
    width: calc(100% - 40px);
    margin-left: 40px;
    .van-tab--active .van-tab__text {
      background: #ee3923;
      border: 1px solid #ee3923;
      color: #fff;
      font-size: 22px;
      font-weight: 400;
    }
    .van-tab--card {
      border: solid 1px #e2e2e2 !important;
      border-radius: 28px;
      font-size: 22px;
      color: #666 !important;
      margin-left: 24px;
      padding: 17px 30px;
      &:first-child {
        margin: 0;
      }
      // .van-tabs__nav--shrink {
      //   display: block;
      // }
    }
  }
  :deep(.van-tabs__nav--shrink) {
    display: flex !important;
  }
}
.sticky {
  position: sticky;
  z-index: 20;
  top: v-bind('props.top');
}
</style>
